import ScrollBarLayout from '@/components/ScrollBarLayout';
import { useContext, useEffect } from 'react';
import { ConractControllerContext } from '../common';
import { Timeline, Table, Empty } from 'antd';
import Cls from 'classnames';
import { UpCircleOutlined, DownCircleOutlined } from '@ant-design/icons';
import { ContractManageAPI } from '../common/type';
import { modifyTableColumns } from '@/utils/myutilConfig';
import MyIcon from '@/components/MyIcon';

const changeList: Record<string, any>[] = [
  {
    id: '111',
    modifyTime: '2022-04-06 15:55:06',
    modifyerName: '王路',
    modifyPositionName: '采购员',
    modifyDepartmentName: '物资管理部',
    modifyCompanyName: '东方科技有限公司',
    modifyJson: [
      {
        fieldName: '合同名称',
        oldValue: '大型设备采购合同',
        newValue: '科研部大型设备采购合同',
        id: '333',
      },
      {
        fieldName: '支付方式',
        oldValue: '分期支付',
        newValue: '货到付款',
        id: '4444',
      },
      {
        fieldName: '合同金额（元）',
        oldValue: '100000',
        newValue: '5000000',
        id: '555',
      },
      {
        fieldName: '企业类型',
        oldValue: '合资',
        newValue: '独有',
        id: '666',
      },
      {
        fieldName: '框架关系',
        oldValue: '普通合同',
        newValue: '订单合同',
        id: '777',
      },
      {
        fieldName: '是否重大（要）合同',
        oldValue: '否',
        newValue: '是',
        id: '888',
      },
      {
        fieldName: '预计开始时间',
        oldValue: '2023-08-08 13:59:59',
        newValue: '2023-10-01 12:00:00',
        id: '999',
      },
    ],
  },
  {
    id: '2222',
    modifyTime: '2022-04-06 15:59:59',
    modifyerName: '小樱',
    modifyPositionName: '产品销售',
    modifyDepartmentName: '信息采集部',
    modifyCompanyName: '东方科技有限公司',
    modifyJson: [
      {
        fieldName: '合同名称',
        oldValue: '大型设备采购合同',
        newValue: '科研部大型设备采购合同',
        id: 'aaa',
      },
      {
        fieldName: '支付方式',
        oldValue: '分期支付',
        newValue: '货到付款',
        id: 'bbb',
      },
      {
        fieldName: '合同金额（元）',
        oldValue: '100000',
        newValue: '5000000',
        id: 'ccc',
      },
      {
        fieldName: '预计开始时间',
        oldValue: '2023-08-08 13:59:59',
        newValue: '2023-10-01 12:00:00',
        id: 'ddd',
      },
    ],
  },
];
export const ContractChanageList: React.FC<ContractManageAPI.IContractChanageList> = ({ allOpenChildren, changeOpenChildren, clickOpenClose }) => {
  /**引入上下文 */
  const { styleFixCls } = useContext(ConractControllerContext);
  /** 初始化 */
  useEffect(() => {
    if (changeList?.length > 0 && allOpenChildren?.openIdKey?.length == 0) {
      const allOpenIDList: string[] = changeList?.map((item: any) => item?.id);
      const changeOpenObj = {
        allOpenKeys: allOpenIDList,
        openIdKey: [allOpenIDList?.[0]],
      };
      changeOpenChildren(changeOpenObj);
    }
  }, [changeList]);

  return (
    <div className={'commonTabsBodyDom'}>
      {changeList?.length > 0 ? (
        <ScrollBarLayout style={{ margin: '5px 0px' }}>
          <div className={styleFixCls + 'contractTimeLineSty'}>
            <Timeline>
              {changeList?.map((item: any, index: number) => {
                return (
                  <Timeline.Item key={`${item?.id}-${index}`} dot={<MyIcon style={{ fontSize: 18 }} type="icon-time-circle" />}>
                    <div
                      style={{
                        margin: '5px 0px',
                      }}
                    >
                      【<span className={styleFixCls + 'contractTimeLineSty-titleUserBoxSty'}>{item.modifyDepartmentName || '--'}</span>
                      】—【
                      <span className={styleFixCls + 'contractTimeLineSty-titleUserBoxSty'}>{item.modifyerName || '--'}</span>
                      】于&nbsp;
                      <span className={styleFixCls + 'contractTimeLineSty-titleTimeBoxSty'}>{item?.modifyTime || '--'}</span>
                      &nbsp;变更，变更记录如下：
                      <a
                        onClick={() => {
                          clickOpenClose(item?.id, allOpenChildren);
                        }}
                      >
                        {allOpenChildren?.openIdKey?.includes(item?.id) ? <UpCircleOutlined /> : <DownCircleOutlined />}
                      </a>
                    </div>
                    {allOpenChildren?.openIdKey?.includes(item?.id) && (
                      <div className={Cls(styleFixCls + 'contractTimeLineSty-changeBodyBox', 'listTable-zIndexStyle')}>
                        <Table columns={modifyTableColumns} size="small" bordered dataSource={item?.modifyJson} pagination={false} rowKey={'id'} />
                      </div>
                    )}
                  </Timeline.Item>
                );
              })}
            </Timeline>
          </div>
        </ScrollBarLayout>
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
      )}
    </div>
  );
};
